<template>
    <div class="booke-details-wrapper">
      <top-bar :title="topTitle"></top-bar>

      <div v-if="status==0"></div>

      <!--预约成功-->
      <div v-else-if="status==1" class="appoint-success">
        <div class="top">
          <span class="tag">预约成功</span>
          <span class="time">{{memberInfo.appointtime}}</span>
        </div>
        <div class="reservation-code">
            <img src="../../../static/images/appoint/reservation-code-success.png" class="full-img">
            <div class="code-box">
              <p class="text1">预约码</p>
              <p class="num">{{memberInfo.appointserial}}</p>
              <p class="text2">请于当日前往医院使用该号码取票接种</p>
            </div>
        </div>
        <div class="baby-info">
          <h4>{{loacalchild.name}}</h4>
          <div><span>取号时间段：</span>{{memberInfo.appointtime}}--{{memberInfo.appointinotime}}</div>
          <div><span>接种地点：</span>{{memberInfo.inoculatePointName}}<span class="arrow">>></span></div>
          <div><span>订单编号：</span>{{memberInfo.orderserial}}</div>
        </div>
        <div class="vaccine-info" v-for="(item,index) in inoculatePlanVOList" :key="index">
          <div class="v-top">
            <div class="tags">
              <a v-if="item.ispay==0">自费</a>
              <a v-else>免费</a>

              <!-- 判断是否必打 0必打，1自选,2替代-->
              <a class="replace-tag" v-if="item.canselect==0">替代</a>
              <a class="replace-tag" v-if="item.canselect==1">自选</a>
              <a class="replace-tag" v-if="item.canselect==2">替代</a>
            </div>
            <div class="price">￥{{item.price}}</div>
          </div>
          <div class="v-center">
            <h4 class="vaccine-title">{{item.name}}</h4>
            <div class="b-box">
              <div class="left">
                <p class="dose">(第{{item.dose}}剂/共{{item.totaldose}}剂) 属性:{{item.type}}</p>
                <p class="company" :style="{ width: width-140+'px'}">疫苗厂家：{{item.company}}</p>
              </div>
              <div class="right">
                <a class="detail-btn" @click="vaccineInfo(item)">详情</a>
              </div>
            </div>
          </div>
        </div>
        <div class="btn-wrapper">
          <x-button @click.native="cancelAppoint">取消预约</x-button>
        </div>
      </div>

      <!--已取消-->
      <div v-else-if="status==2" class="appoint-cancal">
        <div class="top">
          <span class="tag">已取消</span>
          <span class="time">{{memberInfo.appointtime}}</span>
        </div>
        <div class="reservation-code">
          <img src="../../../static/images/appoint/reservation-code-cancel.png" class="full-img">
          <div class="code-box">
            <p class="text1">预约码</p>
            <p class="num">{{memberInfo.appointserial}}</p>
            <p class="text2">请于当日前往医院使用该号码取票接种</p>
          </div>
        </div>
        <div class="baby-info">
          <h4>{{loacalchild.name}}</h4>
          <div><span>取号时间段：</span>{{memberInfo.appointtime}}--{{memberInfo.appointinotime}}</div>
          <div><span>接种地点：</span>{{memberInfo.inoculatePointName}}<span class="arrow">>></span></div>
          <div><span>订单编号：</span>2312315255252</div>
        </div>
        <div class="cancel-reason" v-if="memberInfo.remarks">
          <h4>关闭原因</h4>
          <p>{{memberInfo.remarks}}</p>
        </div>
        <div class="vaccine-wrapper">
          <div class="vaccine-info" v-for="(item,index) in inoculatePlanVOList" :key="index" @click="vaccineInfo(item)">
            <div class="v-top">
              <div class="tags">
                <a v-if="item.ispay==0">自费</a>
                <a v-else>免费</a>

                <!-- 判断是否必打 0必打，1自选,2替代-->
                <a class="replace-tag" v-if="item.canselect==0">替代</a>
                <a class="replace-tag" v-if="item.canselect==1">自选</a>
                <a class="replace-tag" v-if="item.canselect==2">替代</a>
              </div>
              <div class="price">￥{{item.price}}</div>
            </div>
            <div class="v-center">
              <h4 class="vaccine-title">{{item.name}}</h4>
              <div class="b-box">
                <div class="left">
                  <p class="dose">(第{{item.dose}}剂/共{{item.totaldose}}剂) 属性:{{item.type}}</p>
                  <p class="company" :style="{ width: width-140+'px'}">疫苗厂家：{{item.company}}</p>
                </div>
                <div class="right">
                  <a class="detail-btn">详情</a>
                </div>
              </div>
            </div>
          </div>

        </div>

      </div>

      <!--待付款-->
      <div v-else-if="status==3" class="appoint-payment">
        <div class="top">
          <span class="tag">待付款</span>
          <span class="time">2019.04.19 20:12</span>
        </div>
        <div class="baby-info">
          <h4>欧阳振文</h4>
          <div><span>接种地点：</span>四川省成都市高新区益州大道337号疾控...<span class="arrow">>></span></div>
          <div><span>订单编号：</span>{{memberInfo.orderserial}}</div>
        </div>
        <div class="vaccine-wrapper">
          <div class="vaccine-info">
            <div class="v-top">
              <div class="tags">
                <a>自费</a>
                <a class="replace-tag">替代</a>
              </div>
              <div class="price">￥238.00</div>
            </div>
            <div class="v-center">
              <h4 class="vaccine-title">冻干甲型肝炎减毒活疫苗</h4>
              <div class="b-box">
                <div class="left">
                  <p class="dose">(第1剂/共3剂) 属性:一类</p>
                  <p class="company" :style="{ width: width-140+'px'}">疫苗厂家：四川省成都市高科技疫苗厂四川省成都市高科技疫苗厂</p>
                </div>
                <div class="right">
                  <a class="detail-btn"  @click="vaccineInfo(item)">详情</a>
                </div>
              </div>
            </div>
          </div>
          <div class="vaccine-info">
            <div class="v-top">
              <div class="tags">
                <a>自费</a>
                <a class="replace-tag">替代</a>
              </div>
              <div class="price">￥238.00</div>
            </div>
            <div class="v-center">
              <h4 class="vaccine-title">冻干甲型肝炎减毒活疫苗</h4>
              <div class="b-box">
                <div class="left">
                  <p class="dose">(第1剂/共3剂) 属性:一类</p>
                  <p class="company" :style="{ width: width-140+'px'}">疫苗厂家：四川省成都市高科技疫苗厂四川省成都市高科技疫苗厂</p>
                </div>
                <div class="right">
                  <a class="detail-btn">详情</a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="btn-con">
          <x-button class="cancel-btn">取消预约</x-button>
          <x-button class="pay-btn">立即支付</x-button>
        </div>
      </div>

    </div>
</template>

<script>
  import { XButton } from 'vux';
  import TopBar from '@/components/top'

    export default {
      metaInfo () {
        return {
          title: '预约详情'
        }
      },
      data(){
        return {
          topTitle:'预约详情',
          status:null,
          width:document.documentElement.clientWidth,

          memberInfo:{
            status:0,
          },
          userInfo:{},
          babyid:null,
          children:[],
          loacalchild:{},

          inoculatePlanVOList:[]
        }
      },
      mounted(){
        this.getData();
      },
      methods:{
        getData(){
          let id=this.$route.query.id;
          this.$api.post(`/vaccinationReservation/queryOrderInfo`,{
            id:id
          }).then( (res)=> {
            console.log(res.data)
            if(res.data.result==0){
                this.memberInfo=res.data.obj;
                // this.status=res.data.obj.status;  // 1成功
              if(res.data.obj.status==1){
                this.status=1;
              }else if(res.data.obj.status==3){
                this.status=2;
              }else if(res.data.obj.status==5){
                this.status=0;
              }

                this.babyid=res.data.obj.babyid;
                this.children=JSON.parse(sessionStorage.getItem('children'));
               for(let i in this.children){
                 if(this.children[i].id==this.babyid){
                    this.loacalchild=this.children[i]
                 }
               }

               if(res.data.obj.inoculatePlanVOList){
                  this.inoculatePlanVOList=res.data.obj.inoculatePlanVOList
               }
            }
          })
        },
        vaccineInfo(val){
          console.log(111111111)
          console.log(val)
          this.$router.push({path: '/vaccinedetails',query:{vaccinecoding:val.vaccinecoding}})
        },
        cancelAppoint(){

          let id=this.$route.query.id;
          this.$api.get(`/vaccinationReservation/cancelOrder/${id}`).then( (res)=> {
              if(res.data.result==0){
                this.$router.go(-1);
              }else{
                this.$vux.toast.text(res.data.msg, 'middle')
              }
          })
        }
      },
      components: {
        XButton,
        TopBar
      }
    }
</script>

<style lang="scss">
  .booke-details-wrapper{
    width:100%;
    height: 100%;
    overflow: scroll;
    background: #fff;
    .appoint-success, .appoint-cancal,.appoint-payment{
      padding: 20px 15px 0;
      .top{
        .tag{
          background:rgba(245,180,110,1);
          font-size:12px;
          font-family:PingFang-SC-Regular;
          font-weight:400;
          color:rgba(255,255,255,1);
          height:17px;
          line-height: 17px;
          display: inline-block;
          padding:0 8px;
        }
        .time{
          font-size:12px;
          font-family:PingFang-SC-Regular;
          color:rgba(122,122,122,1);
          float: right;
        }
      }
      .reservation-code{
        position: relative;
        margin-top:15px;
        .code-box{
          position: absolute;
          top:22%;
          width: 100%;
          text-align: center;
          .text1{
            font-size:12px;
            font-family:PingFang-SC-Regular;
            color:rgba(255,242,242,1);
          }
          .num{
            font-size:29px;
            font-family:PingFang-SC-Bold;
            color:rgba(255,255,255,1);
            margin:10px 0;
          }
          .text2{
            font-size:12px;
            font-family:PingFang-SC-Regular;
            color:rgba(255,255,255,1);
          }
        }
      }
      .baby-info{
        background:rgba(255,255,255,1);
        box-shadow:0px 0px 10px 1px rgba(50,51,51,0.06);
        border-radius:10px;
        padding:15px;
        margin-top:10px;
        h4{
          font-size:18px;
          font-family:PingFang-SC-Bold;
          font-weight:bold;
          color:rgba(38,38,38,1);
          margin-bottom: 12px;
        }
        div{
          font-size:12px;
          font-family:PingFang-SC-Regular;
          color:#262626;
          margin-bottom: 12px;
          span{
            color:#7A7A7A;
          }
          .arrow{
            color:#F56363;
          }
        }
      }
      .vaccine-info{
        background:rgba(255,255,255,1);
        box-shadow:0px 0px 10px 1px rgba(50,51,51,0.06);
        border-radius:10px;
        margin-top:10px;
        padding:10px;
        .v-top{
          zoom: 1;
          border-bottom: 1px solid #EEEEEE;
          padding-bottom: 10px;
          margin-bottom: 15px;
          &:after{
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
          }
          .tags{
            float: left;
            a{
              background:rgba(245,180,110,1);
              height:17px;
              line-height: 17px;
              font-size:12px;
              font-family:PingFang-SC-Regular;
              font-weight:400;
              color:rgba(255,255,255,1);
              padding:0 9px;
              &.replace-tag{
                background: #7BCB54;
              }
          }
          }
          .price{
            font-size:14px;
            font-family:PingFang-SC-Regular;
            font-weight:400;
            color:rgba(38,38,38,1);
            float: right;
          }
        }
        .v-center{
          .vaccine-title{
            font-size:15px;
            font-family:PingFang-SC-Regular;
            color:rgba(38,38,38,1);
          }
          .b-box{
            display: flex;
            .left{
              .dose{
                font-size:12px;
                font-family:PingFang-SC-Regular;
                color:rgba(122,122,122,1);
                margin:10px 0;
              }
              .company{
                font-size:12px;
                font-family:PingFang-SC-Regular;
                color:rgba(122,122,122,1);
                white-space:nowrap;
                overflow:hidden;
                text-overflow:ellipsis;
                display: block;
              }
            }
            .right{
              flex: 0 0 74px;
              margin-left: 8px;
              .detail-btn{
                width:74px;
                height:30px;
                line-height: 30px;
                text-align: center;
                border:1px solid rgba(245,99,99,1);
                border-radius:10px;
                font-size:14px;
                font-family:PingFang-SC-Regular;
                color:rgba(218,74,74,1);
                display: inline-block;
              }
            }
          }
        }
      }
      .btn-wrapper{
        margin: 25px 0;
        .weui-btn{
          background-color:#99B5CE;
          color:rgba(255,255,255,1);
          border-radius:24px;
          font-weight: normal;
        }
      }
    }
    .appoint-cancal{
      .top{
        .tag{
          background:#698196;
        }
      }
      .cancel-reason{
        background:rgba(255,255,255,1);
        box-shadow:0px 0px 10px 1px rgba(50,51,51,0.06);
        border-radius:10px;
        padding:15px;
        margin-top:10px;
        h4{
          height:14px;
          line-height: 14px;
          font-size:15px;
          font-family:PingFang-SC-Regular;
          font-weight:400;
          color:rgba(38,38,38,1);
          border-left:4px solid #F56363;
          padding-left:4px;
          margin-bottom: 15px;
        }
        p{
          font-size:15px;
          font-family:PingFang-SC-Regular;
          color:rgba(38,38,38,1);
        }
      }
      .vaccine-wrapper{
        margin-bottom: 30px;
      }
    }
    .appoint-payment{
      .top{
        .tag{
          background: #DA4A4A;
        }
      }
      .btn-con{
        display: flex;
        align-items: center;
        margin-top: 20px;
        .weui-btn{
          border-radius:24px;
          font-size:17px;
          font-family:PingFang-SC-Regular;
          font-weight:400;
          color:rgba(255,255,255,1);
          height:49px;
          line-height: 49px;
          vertical-align: middle;
          &:after{
            border:none;
          }
        }
        .cancel-btn{
          background:rgba(153,181,206,1);
          display: inline-block;
          flex: 1;
          margin-right: 10px;
        }
        .pay-btn{
          flex: 2;
          background:rgba(245,99,99,1);
          display: inline-block;
        }
      }
      .weui-btn + .weui-btn{
        margin-top: 0;
      }
    }
  }
</style>
